<template>
  <div>
    <div class="label" v-context-menu="contextMenu1">小圆</div>
    <div class="label" v-context-menu="contextMenu2">悠米</div>
  </div>
</template>

<script setup lang="ts">
import { type ContextMenuItem, vContextMenu } from "@/components/ContextMenu";

const contextMenu1: ContextMenuItem[] = [
  { title: "小圆1", handler: () => console.log("小圆1") },
  { title: "小圆2", handler: () => console.log("小圆2"), disabled: true },
];
const contextMenu2: ContextMenuItem[] = [
  { title: "悠米1", handler: () => console.log("悠米1") },
  { title: "悠米2", handler: () => console.log("悠米2") },
  { title: "悠米3", handler: () => console.log("悠米3") },
];
</script>
<style lang="scss" scoped>
.label {
  padding: 20px 50px;
  margin-bottom: 20px;
  background: #fae;
  width: fit-content;
}
</style>
